<template>
    <div class="search">
        <div class="search-box-wrapper">
            <searchBox ref="searchBox"></searchBox>
        </div>
        <div class="hot-key" v-show="!query">
            <h1 class="title">热门搜索</h1>
            <ul>
                <li class="item" v-for="item of hotkey" :key="item.n" @click="addQuery(item.k)"><span>{{item.k}}</span></li>
            </ul>
        </div>
        <div class="search-history" v-show="searchHistory.length>0">
            <h1 class="title">
                <span class="text">搜索历史</span>
                <span class="clear"></span>
                <i class="icon-clear"></i>
            </h1>
            <!-- <search-list></search-list> -->
        </div>
        <div class="search-suggest" v-show="query">
        <suggest :query="query" ref="suggest"></suggest>
        </div>
    </div>
</template>
<script>
import searchBox from 'components/search-box/search-box'
import {getHotKey} from 'api/search'
import {mapState} from "vuex"
import suggest from 'components/suggest/suggest'
export default {
    components:{
        searchBox,
        suggest
    },
    data(){
        return {
           hotkey:[],
           searchHistory:[]
        }
    },
    computed:{
      query:{
          get(){
              return this.$store.state.query
          },
          set(query){
            this.$refs.searchBox.setquery(query)
          }
      }
    },
    created(){
      this._getHotKey()
    },
    methods:{
       _getHotKey(){
         getHotKey().then(res=>{
             this.hotkey = res.data.hotkey.splice(0,10)
         })
       },
       addQuery(query){
        //    console.log(this.$refs.searchBox)
           this.$refs.searchBox.setquery(query)
       }
    }
}
</script>
<style lang="stylus" scoped>

 .search{
    .search-box-wrapper{
        margin-top 10px
    }
    .hot-key{
        margin: 20px
       .title{
          margin-bottom: 20px
          font-size: 14px
          color: black
        }
        .item{
          display inline-block
          padding 5px 10px
          margin 0 20px 10px 0
          border-radius 6px
          border 1px solid black 
          font-size 14px
        } 
    }
 }

</style>